<template>
  <basic-container class="base__c">
    <el-button icon="el-icon-check" size="small" @click="viewCheckBoxAction">状态图表</el-button>
    <el-button icon="el-icon-check" size="small" @click="viewQustion">问题追踪</el-button>
    <avue-tabs :option="option" @change="handleChange"></avue-tabs>
    <periview1 v-if="type.prop==='tab1'" :periViewRow="periViewRow"></periview1>
    <periview2 v-else-if="type.prop==='tab2'" :periViewRow="periViewRow"></periview2>
    <periview3 v-else-if="type.prop==='tab3'" :periViewRow="periViewRow"></periview3>
    <perichart   v-if="viewCheckBox"
                 :periViewRow="periViewRow"
                 @closeInnerView="closeInnerView"
    ></perichart>
    <el-dialog title="问题追踪"
               append-to-body
               :visible.sync="viewQustionBox"
               width="1000px">
      <question  :periViewRow="periViewRow" v-if="viewQustionBox"></question>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {mapGetters} from "vuex";
  import perichart from './perichart.vue'
  import periview1 from './periview1.vue'
  import periview2 from './periview2.vue'
  import periview3 from './periview3.vue'
  import question from './question.vue'
  export default {
    data() {
      return {
        viewCheckBox: false,
        viewQustionBox: false,
        type:{},
        option:{
          column: [{
            icon:'el-icon-info',
            label: '发酵模块',
            prop: 'tab1',
          }, {
            icon:'el-icon-warning',
            label: '其他模块',
            prop: 'tab2',
          }, {
            icon:'el-icon-question',
            label: '电量',
            prop: 'tab3',
          }]
        }

      };
    },
    components: {perichart,periview1,periview2,periview3,question},
    props: ["periViewRow"],
    computed: {

    },
    created() {
      this.type = this.option.column[0];
    },
    methods: {
      closeInnerView() {
        this.viewCheckBox = false
      },
      viewCheckBoxAction() {
        this.viewCheckBox = true
      },
      viewQustion(row) {
        this.viewQustionBox =true
      },
      handleChange(column) {
        this.type = column
       // this.$message.success(JSON.stringify(column))
      }
    }
  };
</script>

<style lang="scss">
  .base__c{
    &>.el-card.is-always-shadow{
      box-shadow: none !important;
    }
  }

</style>
